<template>
    <div>
        <div>
            <el-select
                v-model="selectBy"
                placeholder="查询方式"
                style="width: 10%"
            >
                <el-option
                    v-for="item in select"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option> </el-select
            >&nbsp;
            <el-input v-if="selectBy==0"
                placeholder="请输入内容"
                v-model="selectContent"
                style="width: 40%"
                clearable
            >
            </el-input
            >&nbsp;
                        <el-select
                v-model="selectContent"
                placeholder="查询方式"
                v-if="selectBy==1"
                style="width: 10%"
            >
                <el-option
                    v-for="item in status"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option> </el-select
            >&nbsp;
            <el-button type="primary" icon="el-icon-search" @click="Search">搜索</el-button>
        </div>
        <el-table
            :data="formList"
            style="width: 100%"
            :row-class-name="tableRowClassName"
        >
            <el-table-column prop="createTime" label="发布日期" width="180">
            </el-table-column>

            <el-table-column prop="formName" label="表单名" width="180">
            </el-table-column>

            <el-table-column label="表单状态">
                <template slot-scope="scope">
                    <span
                        style="color: #e6a23c"
                        v-if="scope.row.formStatus == 0"
                        >未发布</span
                    >
                    <span
                        style="color: #67c23a"
                        v-if="scope.row.formStatus == 1"
                        >发布中</span
                    >
                    <span
                        style="color: #909399"
                        v-if="scope.row.formStatus == 2"
                        >已结束</span
                    >
                </template>
            </el-table-column>

            <el-table-column prop="address" label="表单标签"> </el-table-column>

            <el-table-column prop="address" label="操作">
                <template slot-scope="scope">
                    <el-link
                        :underline="false"
                        class="el-icon-edit"
                        v-if="scope.row.formStatus == 0"
                        @click="Edit(scope.row.id)"
                        >编辑 </el-link
                    >&nbsp;
                    <el-popconfirm
                        confirm-button-text="确定"
                        cancel-button-text="取消"
                        title="确定要发布表单吗？"
                        hide-icon
                        @onConfirm="EditStatus(scope.row, 1)"
                    >
                        <el-link
                            slot="reference"
                            class="el-icon-s-promotion"
                            v-if="scope.row.formStatus == 0"
                            :underline="false"
                            >发布
                        </el-link>
                    </el-popconfirm>

                    <el-popconfirm
                        confirm-button-text="确定"
                        cancel-button-text="取消"
                        title="确定要停止发布表单吗？"
                        hide-icon
                        @onConfirm="EditStatus(scope.row, 2)"
                    >
                        <el-link
                            slot="reference"
                            class="el-icon-video-pause"
                            v-if="scope.row.formStatus == 1"
                            :underline="false"
                            >停止
                        </el-link>
                    </el-popconfirm>
                    &nbsp;
                    <el-link
                        slot="reference"
                        class="el-icon-share"
                        v-if="scope.row.formStatus == 1"
                        :underline="false"
                        @click="Share(scope.row)"
                        >分享</el-link
                    >
                    <el-popconfirm
                        confirm-button-text="确定"
                        cancel-button-text="取消"
                        title="确定要继续发布表单吗？"
                        hide-icon
                        @onConfirm="EditStatus(scope.row, 1)"
                    >
                        <el-link
                            slot="reference"
                            class="el-icon-video-pause"
                            v-if="scope.row.formStatus == 2"
                            :underline="false"
                            >继续</el-link
                        >
                    </el-popconfirm>
                    &nbsp;
                    <el-link
                        :underline="false"
                        class="el-icon-edit"
                        v-if="scope.row.formStatus == 2"
                        @click="SeeResult(scope.row.id)"
                        >结果</el-link
                    >
                    &nbsp;
                    <el-popconfirm
                        confirm-button-text="确定"
                        cancel-button-text="取消"
                        icon="el-icon-info"
                        icon-color="red"
                        title="确定要删除表单吗？"
                        @onConfirm="EditStatus(scope.row, -1)"
                    >
                        <el-link
                            slot="reference"
                            class="el-icon-delete-solid"
                            :underline="false"
                            >删除</el-link
                        >
                    </el-popconfirm>
                    &nbsp;
                    <el-link
                        :underline="false"
                        class="el-icon-star-on"
                        @click="SetModel(scope.row.id)"
                        >收藏</el-link
                    >
                    <el-dialog
                        title="分享链接"
                        :visible.sync="urlDialogVisible"
                        width="30%"
                    >
                        <div>
                            <h2>url链接&nbsp;:&nbsp;</h2>
                            <el-input
                                v-model="url"
                                placeholder="请输入内容"
                            ></el-input>
                        </div>
                        <span slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="CopyUrl"
                                >复制</el-button
                            >
                        </span>
                    </el-dialog>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<style>
.el-table .nopublish-row {
    background: oldlace;
}

.el-table .published-row {
    background: #f0f9eb;
}

.el-table .paused-row {
    background: #dcdcdc;
}
</style>






<script>
import { queryFormList } from "@/api/ipublish.js"; //获取表单列表
import { editStatus } from "@/api/ipublish.js"; //修改表单状态
//引入复制功能

Vue.use(VueClipboard);

export default {
    data() {
        return {
            urlDialogVisible: false,
            url: "",
            total: null,
            currentPage: 1, //当前页
            pageSize: 10, //每页包含的元素数
            selectBy:0,
            selectContent:"",
            formList: [],
            // search: "", //搜索内容
            // url: "", //展示的url
            // urlDialogVisible: false, //url对话框
            // formList: [], //保存后端查询出来的表单信息列表
            // //下拉菜单
            select: [
                {
                    value: 0,
                    label: "按表名",
                },
                {
                    value: 1,
                    label: "按状态",
                },
            ],
            status:[
                {
                    value: 0,
                    label: "未发布",
                },
                {
                    value: 1,
                    label: "已发布",
                },
                {
                    value: 2,
                    label: "已结束",
                },
            ],

        };
    },
    //页面刷新自动调用的方法
    created() {
        this.QueryFormList(this.currentPage,this.pageSize,this.selectBy,this.selectContent); //获取某页元素
    },
    methods: {
        handleSizeChange(val) {
            //页面大小改变时触发
            this.pageSize = val;
            this.QueryFormList(this.currentPage,this.pageSize,this.selectBy,this.selectContent);
        },
        handleCurrentChange(val) {
            //页码改变时触发
            this.currentPage = val;
            this.QueryFormList(this.currentPage,this.pageSize,this.selectBy,this.selectContent);
        },
        tableRowClassName({ row, rowIndex }) {
            if (row.formStatus === 0) {
                return "nopublish-row";
            } else if (row.formStatus === 1) {
                return "published-row";
            } else if (row.formStatus === 2) {
                return "paused-row";
            }
            return "";
        },
        //查询后端数据库，获取用户表单列表
        QueryFormList(pageNo,pageSize,selectBy,selectContent) {
            //打包数据
            var params = {
                pageNo: pageNo,
                pageSize: pageSize,//
                selectBy:selectBy,//查询方式:0表名 1状态 全部按时间排序
                selectContent:selectContent//查询内容

            };
            //保存this
            var that = this;
            //调用接口，获取表单数据列表
            queryFormList(params)
                .then((response) => {
                    //查看后端发来的数据
                    console.log(response);
                    //元素总数赋值
                    that.total = response.counts;
                    //为前端页面数据赋值
                    that.formList = response.forms;
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //搜索
        Search(){
            this.currentPage=1;
            this.QueryFormList(this.currentPage,this.pageSize,this.selectBy,this.selectContent);
        },
        //根据表单id改变id状态   停止<->发布
        EditStatus(row, status) {
            //打包数据
            var params = {
                formId: row.id,
                formStatus: status,
            };
            //保存this指针
            var that = this;
            //调用接口，根据id删除表单
            editStatus(params)
                .then((response) => {
                    //查看后端发来的数据
                    console.log(response);
                    //消息提醒
                    if (status == 2) {
                        row.formStatus = 2;
                        this.$message("停止表单成功");
                    } else if (status == 1) {
                        this.$message({
                            message: "发布表单成功",
                            type: "success",
                        });
                        row.formStatus = 1;
                        that.url = row.formUrl;
                        that.urlDialogVisible = true;
                    } else if ((status = -1)) {
                        for (var i = 0; i < that.formList.length; i++) {
                            if (that.formList[i].id == row.id) {
                                that.formList.splice(i, 1);
                                //消息提醒
                                this.$message("删除表单成功");
                                break;
                            }
                        }
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },

        //进入编辑表单页面
        Edit(formId) {
            this.$router.push({
                path: "/person/edit",
                query: { formId: formId },
            });
        },

        //查看表单结果，进行带参（表单id）跳转
        SeeResult(formId) {
            this.$router.push({
                path: "/person/result",
                query: { formId: formId },
            });
        },

        //分享url
        Share(row) {
            this.urlDialogVisible = true;
            this.url = row.formUrl;
        },

        //复制URL
        CopyUrl() {
            var that = this;
            this.$copyText(this.url).then(function (e) {
                that.$message({
                    message: "复制链接成功，赶紧分享给你的小伙伴吧！",
                    type: "success",
                });
            });
        },

        handleCommand(command) {
            this.$message("click on item " + command);
        },
        //复用表单
        SetModel() {},
    },

    // computed: {
    //     filterFormList() {
    //         return this.formList.filter((data) => {
    //             if (this.value == "0") {
    //                 return data.title
    //                     .toLowerCase()
    //                     .includes(this.search.toLowerCase());
    //             } else if (this.value == "1") {
    //                 return data.createTime
    //                     .toLowerCase()
    //                     .includes(this.search.toLowerCase());
    //             } else if (this.value == "3") {
    //                 if (this.search == "未发布") {
    //                     return data.status == 0;
    //                 } else if (this.search == "已发布") {
    //                     return data.status == 1;
    //                 } else if (this.search == "已结束") {
    //                     return data.status == 2;
    //                 } else {
    //                     return data;
    //                 }
    //             } else {
    //                 return data;
    //             }
    //         });
    //     },
    // },
};
</script>
